<template>
    <MainSlot v-loading="loading">
        <template v-slot:table>
            <div class="select-box">
                <div class="select-box-container">
                    <div class="select-box-item flexItem">
                        <span class="label">关联品种：</span>
                        <span class="noData" v-show="FishVarietyList.length == 0">暂无诊断项</span>
                        <div class="itemList">
                            <div class="item" v-show="FishVarietyList.length"
                                :class="formData.plantVarietyId == item.plantVarietyId ? 'itemActive' : ''"
                                @click="() => { formData.plantVarietyId = item.plantVarietyId; qureyFeaturesTypeManage(formData.plantVarietyId, item.plantVarietyNo) }"
                                v-for="item of FishVarietyList" :key="item.plantVarietyId">{{ item.plantVarietyName }}
                            </div>
                        </div>
                    </div>
                    <div class="select-box-item flex" v-for="(item, index) of BOList" :key="index">
                        <div class="select-box-item-child">
                            <div class="select-box-item flexItem">
                                <span class="label">诊断项名称：</span>
                                <span class="noData" v-show="FeaturesTypeManageList.length == 0">暂无诊断项</span>
                                <div class="itemList">
                                    <div v-show="FeaturesTypeManageList.length > 0" class="item" :class="items.diagnosisItemId == item.diagnosisItemId ? 'itemActive' :
        disabledList.indexOf(items.diagnosisItemId) !== -1 ? 'itemOpacity' : ''"
                                        @click="() => { qureyDiseaseFeatures(items.diagnosisItemId, index) }"
                                        v-for="items of FeaturesTypeManageList"
                                        :key="items.diagnosisItemId + 'FeaturesType'">
                                        {{ items.diagnosisItemName }}{{ items.mainFeaturesFlag ? '（主要特征）' : '（辅助特征）' }}
                                    </div>
                                </div>
                            </div>
                            <div class="select-box-item" style="width:100%;">
                                <span class="label">诊断项症状： </span>
                                <span class="noData" v-show="!item.diagnosisItemId">暂未选择诊断项</span>
                                <el-select style="width: calc(100% - 400px);" v-show="item.diagnosisItemId" filterable
                                    clearable v-model="item.diagnosisItemSymbolNoList" multiple :ref="'ref' + index"
                                    @change="updateSelected">
                                    <el-option class="selectOption" v-for="item of BOList[index].diseaseFeaturesList"
                                        :key="item.diagnosisItemSymbolId" :value="item.diagnosisItemSymbolNo">
                                        <span class="ellipsis" :title="item.diagnosisItemSymbolDesc">{{
        item.diagnosisItemSymbolNo + '：' + item.diagnosisItemSymbolDesc }}</span>
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="select-box-item-child">
                            <div v-if="BOList.length !== 1" class="line-click" @click="deleteRow(index, item)"><i
                                    class="el-icon-remove-outline"></i></div>
                            <div v-if="index === BOList.length - 1" class="line-click" @click="addRow"><i
                                    class="el-icon-circle-plus-outline"></i></div>
                        </div>
                    </div>
                </div>
                <div class="epidemic-database">
                    <span class="epidemic-database-star">✮</span>推断原则：A、B、C、F是主要判断特征，只要符合其中1-2条或以上即可推定属于该病；D、E是辅助判断特征。
                </div>
            </div>
            <div class="section">
                <div class="section-center">
                    <div class="selected-box">
                        <span>已选特征:</span>
                        <span v-for="(item, index) of formData.diagnosisItemSymbolNoList" :key="index"
                            class="selected-btn">{{ item
                            }}</span>
                    </div>
                    <div class="picture-box">
                        <div class="swiper mySwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="(item, index) of selectNoList" :key="index">
                                    <div class="diagnosis-header">
                                        <span class="diagnosis-header-title">{{ item.diagnosisItemSymbolNo }}</span>
                                        <el-tooltip effect="dark" :content="item.diagnosisItemSymbolDesc"
                                            placement="top-start">
                                            <span class="diagnosis-header-desc">{{ item.diagnosisItemSymbolDesc
                                                }}</span>
                                        </el-tooltip>
                                    </div>
                                    <div class="diagnosis-body">
                                        <div class="imgBox" style="width: 100%;height: 100%; position: relative;"
                                            v-if="item.src && item.src.length">
                                            <el-image style="width: 100%;height: 100%;" :src="item.src[0]"
                                                fit="scale-down" :preview-src-list="item.src">
                                            </el-image>
                                            <div
                                                style="position: absolute;right: 0;bottom: 0;padding: 5px 10px;background: #047ffb85; color: #ffffff;">
                                                共{{ item.src.length }}张</div>
                                        </div>
                                        <span v-else class="diagnosis-body-empty">暂无图片展示</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="diagnosis" v-for="(item, index) of selectNoList" :key="index">
                            <div class="diagnosis-header">
                                <span class="diagnosis-header-title">{{ item.diagnosisItemSymbolNo }}</span>
                                <el-tooltip effect="dark" :content="item.diagnosisItemSymbolDesc" placement="top-start">
                                    <span class="diagnosis-header-desc">{{ item.diagnosisItemSymbolDesc }}</span>
                                </el-tooltip>
                            </div>
                            <div class="diagnosis-body">
                                <div class="imgBox" style="width: 100%;height: 100%; position: relative;"
                                    v-if="item.src && item.src.length">
                                    <el-image style="width: 100%;height: 100%;" :src="item.src[0]" fit="scale-down"
                                        :preview-src-list="item.src">
                                    </el-image>
                                    <div
                                        style="position: absolute;right: 0;bottom: 0;padding: 5px 10px;background: #047ffb85; color: #ffffff;">
                                        共{{ item.src.length }}张</div>
                                </div>
                                <span v-else class="diagnosis-body-empty">暂无图片展示</span>
                            </div>
                        </div> -->
                    </div>
                </div>
                <div class="section-bottom">
                    <div class="result-item" v-for="(item, index) of resultList" :key="index + 'result'">
                        <div class="result-item-row diseaseCase">
                            <div>
                                <span class="result-item-row-title">推断结果：</span>
                                <span class="result-item-row-content diseaseName">{{ item.diseaseName }}</span>
                            </div>
                            <span class="diseaseList" v-show="diseaseCase[item.diseaseBankId]"
                                @click="showDiseaseCase(item)">查看案例</span>
                            <span class="warningText" v-show="!diseaseCase[item.diseaseBankId]">无相关案例</span>
                        </div>
                        <div class="result-item-row">
                            <span class="result-item-row-title">预防方法：</span>
                            <span class="result-item-row-content">{{ item.preventionMethod }}</span>
                        </div>
                        <div class="result-item-row">
                            <span class="result-item-row-title">治疗方法：</span>
                            <span class="result-item-row-content">{{ item.therapeuticMethod }}</span>
                        </div>
                        <div class="result-item-row">
                            <span class="result-item-row-title">特殊症状描述：</span>
                            <span class="result-item-row-content">{{ item.mainSymptoms ? item.mainSymptoms : '无特殊症状描述'
                                }}</span>
                        </div>
                        <div class="result-item-row">
                            <span class="result-item-row-title">疾病可能性：</span>
                            <span class="result-item-row-content">{{ item.ratio ? item.ratio + '%' : '--%' }}</span>
                        </div>
                    </div>
                </div>

            </div>
        </template>
        <template v-slot:dialogModule>
            <el-dialog :close-on-click-modal="false"  title="疾病案例" :visible.sync="dialogVisible" width="53.6%" :before-close="handleClose">
                <el-tabs class="borderCard" type="border-card">
                    <el-tab-pane v-for="item, index in showTableData" :key="index"
                        :label="`${item.caseName}(案例${index + 1})`">
                        <div class="info">
                            <span class="label">疾病名称：</span>
                            <span>{{ item.diseaseName }}</span>
                        </div>
                        <div class="info">
                            <span class="label">疾病症状：</span>
                            <span>{{ item.mainSymptoms }}</span>
                        </div>
                        <div class="info">
                            <span class="label">防治方法：</span>
                            <span>{{ item.preventionMethod }}</span>
                        </div>
                        <div class="info">
                            <span class="label">治疗方法：</span>
                            <span>{{ item.therapeuticMethod }}</span>
                        </div>
                        <div class="imageList" v-if="item.fileUrlList.length > 0">
                            <el-image class="image" v-for="fileId, index in item.fileUrlList" :key="index"
                                style="width: 300px; height: 150px" :src="item.fileUrlList[index]"
                                :preview-src-list="item.fileUrlList" fit="scale-down">
                            </el-image>
                        </div>
                        <span v-else class="errText">无相关图片</span>
                    </el-tab-pane>
                </el-tabs>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </template>
    </MainSlot>
</template>

<script>
import Swiper from 'swiper';
import MainSlot from "@/components/MainSlot";
import Pagination from '@/components/Pagination';
import SearchForm from '@/components/SearchForm';
import TableData from '@/components/TableData';
import BtnSlot from '@/components/BtnSlot';
import diagnosticItemManagement from '@/api/diseaseBankManagement/diagnosticItemManagement.js';
import diagnosticItemSymptom from '@/api/diseaseBankManagement/diagnosticItemSymptom.js';
import diseaseCaseManagement from '@/api/diseaseBankManagement/diseaseCaseManagement.js';
import varietyManagement from '@/api/basicInformation/varietyManagement.js';
import publicLnterface from '@/api/publicLnterface';

export default {
    components: { MainSlot, Pagination, SearchForm, TableData, BtnSlot },
    data() {
        return {
            resetmySwiper: true,
            dialogVisible: false,
            loading: false,
            // 查询条件：
            formData: { diagnosisItemSymbolNoList: [] },
            FishVarietyList: [], // 下拉数据-品种
            FeaturesTypeManageList: [], // 下拉数据-诊断项
            BOList: [{}],
            selectNoList: [],
            resultList: [], // 查询结果
            disabledList: [],
            diseaseCaseList: [],
            diseaseCase: {},
            showTableData: [],
        }
    },
    created() {
        this.qureyFishVariety();
        this.initData();
    },
    mounted() {
    },
    methods: {
        async initData() {
            let { data: diseaseCaseList } = await diseaseCaseManagement.queryByCondition();
            this.diseaseCaseList = diseaseCaseList || [];
            this.diseaseCase = {};
            this.diseaseCaseList.forEach(item => {
                console.log('-----------',item)
                item.fileUrlList = item.fileUrlList?item.fileUrlList.split(','):[];
                if (!this.diseaseCase[item.diseaseBankId]) {
                    this.diseaseCase[item.diseaseBankId] = [];
                }
                this.diseaseCase[item.diseaseBankId].push(item);
            });
            console.log(this.diseaseCase)
        },
        showDiseaseCase(item) {
            let diseaseBankId = item.diseaseBankId;
            this.showTableData = this.diseaseCase[diseaseBankId] || [];
            console.log(this.showTableData)
            console.log(this.showTableData)
            if (this.showTableData.length > 0) {
                this.dialogVisible = true;
            } else {
                this.$message.warning('暂无案例数据')
            }
        },
        qureyFishVariety() {
            varietyManagement.queryByCondition().then(res => {
                this.FishVarietyList = res.data;
            });
        },
        async qureyFeaturesTypeManage(e, plantVarietyNo) {
            this.formData.diagnosisItemSymbolNoList = [];
            this.BOList = [{}];
            this.selectNoList = [];
            this.resultList = [];// 查询结果
            this.disabledList = [];
            let { data } = await publicLnterface.plantVarietyNo({ plantVarietyNo });
            let plantVarietyId = data[0].plantVarietyId
            console.log('公共品种', data)
            diagnosticItemManagement.queryByCondition({ plantVarietyId: plantVarietyId }).then(res => {
                this.FeaturesTypeManageList = res.data;
            });
        },
        qureyDiseaseFeatures(e, index) {
            if (this.disabledList.includes(e) && this.BOList[index].diagnosisItemId !== e) {
                this.$message.info('已有选中的诊断项！');
                return;
            }
            this.disabledList = [];
            this.BOList[index] && this.$set(this.BOList[index], 'diagnosisItemSymbolNoList', []);
            if (this.BOList[index].diagnosisItemId === e) {
                // this.BOList.splice(index, 1)
                this.$set(this.BOList, index, {
                    diseaseFeaturesList: [],
                    diagnosisItemId: ''
                });
                this.BOList.forEach(item => {
                    if (item.diagnosisItemId) {
                        this.disabledList.push(item.diagnosisItemId);
                    }
                });
                console.log(this.BOList);
                this.updateSelected()
            } else {
                diagnosticItemSymptom.queryByCondition({ diagnosisItemId: e }).then(res => {
                    this.$set(this.BOList[index], 'diseaseFeaturesList', res.data);
                    this.$set(this.BOList[index], 'diagnosisItemId', e);
                    this.BOList.forEach(item => {
                        if (item.diagnosisItemId) {
                            this.disabledList.push(item.diagnosisItemId);
                        }
                    });
                    this.updateSelected()
                });
            }
        },
        updateSelected(e) {
            this.$set(this.formData, 'diagnosisItemSymbolNoList', [])
            this.selectNoList = [];
            this.resultList = [];
            console.log(this.BOList, this.formData)
            this.BOList.forEach(item => {
                if (item.diagnosisItemSymbolNoList && item.diagnosisItemSymbolNoList.length) {
                    this.formData.diagnosisItemSymbolNoList.push(...item.diagnosisItemSymbolNoList) // 更新需要传给后端的诊断项症状编号
                    // 处理《中间图片展示的相关数据》
                    this.formData.diagnosisItemSymbolNoList.forEach((diagnosisItem) => {
                        item.diseaseFeaturesList.find(featuresItem => {
                            if (featuresItem.diagnosisItemSymbolNo === diagnosisItem) {
                                this.selectNoList.push(featuresItem)
                            }
                        })
                    })
                }
            })
            this.selectNoList.forEach(item => {
                this.$set(item, 'src', [])
                if (item.fileIdList && item.fileIdList.length) {
                    item.fileIdList.split(',').forEach(async url => {
                        url ? item.src.push(url) : ''
                    })
                }
            })
            this.resetmySwiper = false;
            this.$nextTick(() => {
                this.resetmySwiper = true;
                new Swiper(".mySwiper", {
                    slidesPerView: 4,
                    spaceBetween: 15,
                    freeMode: true,
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                    },
                });
            })
            this.judgeDisease();
        },
        judgeDisease() {
            console.log(this.BOList, this.formData)
            let diagnosisItemSymbolNoList = this.formData.diagnosisItemSymbolNoList;
            diagnosisItemSymbolNoList.length>0 && diagnosticItemSymptom.judgeDisease({ diagnosisItemSymbolNoList }).then(res => {
                console.log('诊断结果', res);
                const data = res.data;
                if (data) {
                    this.resultList = data
                }
            })
        },
        // 点击添加按按钮
        addRow() {
            let list = {};
            console.log(this.FeaturesTypeManageList.length)
            if (!this.formData.plantVarietyId) {
                this.$message.info('请先选择鱼种！')
                return
            }
            if (this.BOList.length < this.FeaturesTypeManageList.length) {
                this.BOList.push(list);
            } else {
                this.$message.info('不可以超出诊断项数量！目前诊断项有' + this.FeaturesTypeManageList.length + '个')
            }
        },
        // 删除改行
        deleteRow(index, item) {
            this.disabledList = []
            this.BOList.splice(index, 1);
            this.BOList.forEach(item => {
                this.disabledList.push(item.diagnosisItemId)
            })
            let id = item.diagnosisItemId
            let symbolList = item.diagnosisItemSymbolNoList
            if (id) {
                this.selectNoList = this.selectNoList.filter((imgData) => {
                    return imgData.diagnosisItemId != id
                })
            }
            if (symbolList && symbolList.length) {
                symbolList.forEach(No => {
                    this.formData.diagnosisItemSymbolNoList = this.formData.diagnosisItemSymbolNoList.filter(symbol => {
                        console.log(symbol)
                        return symbol != No
                    })
                })
            }
        },

        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    }
};
</script>

<style lang="scss" scoped>
::v-deep .slotModule {
    background: #00000000;
    box-shadow: none;
    padding: 0;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.select-box {
    padding: 15px;
    background-color: #ffffff;
    box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);

    .select-box-item {
        width: 100%;
        line-height: 26px;
        margin-bottom: 10px;

        .label {
            display: inline-block;
            width: 160px;
            text-align: right;
        }
    }
}

.select-box-container {
    min-height: 150px;
}

.flexItem {
    display: flex;
    flex-wrap: wrap;

    .itemList {
        width: calc(100% - 180px);
        display: flex;
        flex-wrap: wrap;
    }
}

.item {
    line-height: 26px;
    padding: 0 20px;
    background: #00b7ff1c;
    border: 1px solid #4381b5;
    margin-right: 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    cursor: pointer;
}

.itemActive {
    background-color: #4381b5;
    color: #ffffff;
}

.itemOpacity {
    opacity: 0.5;
}

.picture-box {
    width: 100%;
    height: 225px;
}

.section {
    padding: 15px;
    background: #ffffff;
    margin-top: 10px;
    box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
}

.section-bottom {
    padding: 20px;
    margin-top: 10px;
    background-color: #f8f8f8;
    min-height: 275px;
    overflow-y: auto;

    .result-item {
        margin-bottom: 15px;
        border-bottom: 1px dashed #bebebe;
    }

    .result-item-row {
        margin-bottom: 10px;

        .result-item-row-title {
            display: inline-block;
            padding: 10px;
            margin-right: 15px;
            background: #4381b5;
            color: #ffffff;
            border-radius: 6px;
        }

        .result-item-row-content {
            line-height: 32px;
        }
    }
}


.selected-box {
    margin-bottom: 10px;

    .selected-btn {
        padding: 5px 10px;
        margin: 0 5px;
        background: #4381b5;
        color: #ffffff;
        border-radius: 4px;
    }
}

.imgBox {
    .el-image {
        margin: 0 auto;
    }
}

::v-deep .module,
::v-deep .tableSlot {
    height: 100% !important;

}

.diseaseList {
    color: #0480FB;
    font-weight: bolder;
}

.warningText {
    color: #999999;
    font-size: 14px;
}

.diseaseCase {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    cursor: pointer;
    color: #0480FB;
}

.mySwiper,
.swiper-wrapper {
    width: 100%;
    height: 100%;

    .swiper-slide {
        background-color: #bebebe;

        .diagnosis-header {
            height: 30px;
            line-height: 30px;
            background: #4381b5;
            color: #ffffff;
            text-align: center;
        }

        .diagnosis-body {
            height: calc(100% - 30px);
            flex-wrap: wrap;
        }
    }
}

.ellipsis {
    display: inline-block;
    max-width: 500px;
    /* 设置容器宽度 */
    white-space: nowrap;
    /* 确保文本在一行内显示 */
    overflow: hidden;
    /* 隐藏超出容器的文本 */
    text-overflow: ellipsis;
    /* 在文本末粒显示省略号 */
}
</style>